<template>
  <div class="permission-verify-container">
    <Form ref="selectUsers" :model="selectUsers" :label-width="80">
      <Row>
        <Col span="3">
          <FormItem label="用户名称" prop="userName">
            <Row>
              <Col span="24">
                <Input v-model="selectUsers.userName" type="text" placeholder="请输入用户名称" />
              </Col>
            </Row>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="开始时间" prop="">
            <Row>
              <Col span="8">
                <DatePicker v-model="startTime" type="date" placeholder="开始日期" @on-change="startTimeVal" />
              </Col>
              <Col style="margin-left:20px;color: #515a6e;font-weight: bolder;" span="5">
                —&nbsp; &nbsp; 结束时间
              </Col>
              <Col span="8">
                <DatePicker v-model="endTime" type="date" placeholder="结束日期" @on-change="endTimeVal" />
              </Col>
            </Row>
          </FormItem>
        </Col>
        <Col span="3">
          <FormItem label="使用状态" prop="userStatus">
            <Row>
              <Col span="24">
                <Select v-model="selectUsers.useStatus">
                  <Option value="null">所有状态</Option>
                  <Option value="0">启用</Option>
                  <Option value="1">停用</Option>
                </Select>
              </Col>
            </Row>
          </FormItem>
        </Col>
        <Col span="3">
          <FormItem label="操作状态" prop="manageStatus">
            <Row>
              <Col span="24">
                <Select v-model="selectUsers.manageStatus">
                  <Option value="2">待审核</Option>
                  <Option value="1">通过</Option>
                  <Option value="0">拒绝</Option>
                  <Option value="null">所有</Option>
                </Select>
              </Col>
            </Row>
          </FormItem>
        </Col>
        <Col span="1" :offset="1">
          <Button type="primary" @click="handleSubmit()">搜索</Button>
        </Col>
        <Col span="1">
          <Button type="primary" @click="resetSearch()">重置</Button>
        </Col>
      </Row>
    </Form>
    <Table stripe :columns="columns" :data="verifyData">
      <template slot="action"  slot-scope="{ row, index }">
        <div>
          <span>
          <el-button v-if="row.status=='2'" style="margin-right:5px" size="mini" type="primary" @click="approveConfirm(row, index)">通过</el-button>
          </span>
          <span>
          <el-button v-if="row.status=='2'" size="mini" type="danger" @click="refuseVenify(row)">拒绝</el-button>
          </span>
          <img alt="" v-if="row.status=='1' " src="../../../assets/imgs/permission/passed.png" style="height:25px;cursor:pointer;margin-top:5px" />
          <img alt="" v-if="row.status=='0' " src="../../../assets/imgs/permission/refused.png" style="height:25px;cursor:pointer;margin-top:5px;margin-right:5px" />
          <img alt="" v-if="row.status=='0' " src="../../../assets/imgs/permission/delete.png" style="height:25px;cursor:pointer;margin-top:5px" @click="deleteDate(row)" />
        </div>
      </template>
    </Table>
    <el-row type="flex" justify="end" style="margin-top: 30px">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :page-size="pageSize"
        :current-page.sync="pageNum"
        :total="userCount"
        @current-change="changepageNum"
        @size-change="changePageSize"
      />
    </el-row>
    <!-- 申请用户详细信息弹框 -->
    <Modal
      v-model="approveDialog"
      title="详细信息"
      :width="600"
      :height="600"
      :closable="false"
      :mask-closable="false"
    >
      <Form ref="approveForm" :model="approveForm" :label-width="160" class="labelStrong">
        <FormItem label="用户名" prop="userName">
          {{ approveForm.userName }}
        </FormItem>
        <FormItem label="姓名">
          {{ approveForm.name }}
        </FormItem>
        <FormItem label="邮箱">
          {{ approveForm.email }}
        </FormItem>
        <FormItem label="手机号">
          {{ approveForm.phone }}
        </FormItem>
        <FormItem label="单位">
          {{ approveForm.employer }}
        </FormItem>
        <FormItem label="角色">
          <el-select v-model="approveForm.role" style="width:150px" placeholder="选择角色">
            <el-option
              v-for="item in roleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </FormItem>
        <!-- <FormItem label="使用天数">
          <i-input v-model="approveForm.useTime" type="number" style="width:200px" placeholder="请输入使用天数" />
        </FormItem> -->
        <FormItem label="账号使用状态">
          <RadioGroup v-model="approveForm.useStatus">
            <Radio v-for="item in useStatusList" :key="item.value" :label="item.value">
              <span>{{ item.label }}</span>
            </Radio>
          </RadioGroup>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="handleReset()">取消</Button>
        <Button type="primary" @click="approveConfirm()">确认</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getAllRole, getUserList, audit, userDelete } from '@/api/user'
export default {
  name: 'PermissionVerify',
  components: {},
  mixins: [],
  data() {
    return {
      userId: '',
      refuseIndex: '',
      erpTrade: '',
      roleOptions: [
        {
          value: 'user1',
          label: '张三'
        },
        {
          value: 'user2',
          label: '李四'
        },
        {
          value: 'user3',
          label: '王二麻二'
        }
      ],
      refuseForm: {
        refuseReason: ''
      },
      refuseRule: {
        refuseReason: [
          { required: true, message: '拒绝理由为必填项', trigger: 'blur' },
          { type: 'string', max: 50, message: '拒绝理由不超过50字符', trigger: 'blur' }
        ]
      },
      isRefused: false,
      columns: [{
        title: '序号',
        key: 'index'
      },
      {
        title: '用户名',
        key: 'username'
      },
      {
        title: '姓名',
        key: 'name'
      },
      {
        title: '角色',
        key: 'role'

      },
      {
        title: '单位',
        key: 'company'
      },
      {
        title: '手机号',
        key: 'phonenum'

      },
      {
        title: '邮箱地址',
        key: 'email'

      },
      {
        title: '创建时间',
        key: 'createTime'

      },
      {
        title: '更新时间',
        key: 'updateTime'

      },
      /* {
        title: '剩余天数',
        key: 'duringDay'
      }, */
      {
        title: '使用状态',
        key: 'userStatus',
        render: (h, params) => {
          if (params.row.userStatus === '启用') {
            return h('span', {
              'style': {
                'color': 'rgba(109, 212, 0, 1)'
              }
            }, '• ' + params.row.userStatus)
          } else {
            return h('span', {
              'style': {
                'color': 'rgba(232, 82, 91, 1)'
              }
            }, '• ' + params.row.userStatus)
          }
        }
      },
      {
        title: '操作',
        slot: 'action',
        width: 200,
        align: 'center'
      }
      ],
      verifyData: [],
      pageNum: 1,
      pageSize: 10,
      userCount: 0,
      approveForm: {
        userId: '',
        userName: '',
        name: '',
        email: '',
        phone: '',
        employer: '',
        role: '',
        //useTime: '30',
        useStatus: '0'
      },
      useStatusList: [{
        value: '0',
        label: '启用'
      },
      {
        value: '1',
        label: '停用'
      }],
      approveDialog: false,
      selectUsers: {
        userName: '',
        useStatus: 'null',
        manageStatus: 'null'
      },
      startTime: '',
      endTime: '',
      rowIndex: ''

    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getVerify()
    this.getRoleList()
  },
  methods: {
    /**
     * @description: 获取角色列表
     * @description: 一进页面触发
     * @return {*}
     */
    getRoleList() {
      getAllRole().then(res => {
        if (res.code === 200) {
          this.roleOptions = res.data
        }
      })
    },
    /**
     * @description: 查询用户列表
     * @description: 一进页面触发
     * @return {*}
     */
    getVerify() {
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        username: this.selectUsers.userName,
        status: this.selectUsers.manageStatus,
        useStatus: this.selectUsers.useStatus,
        startTime: this.startTime,
        endTime: this.endTime,
        online: 'null',
        role: ''
      }
      this.getAllusers(data)
    },
    /**
     * @description: 获取用户列表
     * @description: 切换页码
     * @return {*}
     */
    changepageNum(val) { // 切换页码时
      this.pageNum = val
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        username: this.selectUsers.userName,
        status: this.selectUsers.manageStatus,
        useStatus: this.selectUsers.useStatus,
        startTime: this.startTime,
        endTime: this.endTime,
        online: 'null',
        role: ''
      }
      this.getAllusers(data)
    },
    /**
     * @description: 获取用户列表
     * @description: 切换每页数据量
     * @return {*}
     */
    changePageSize(val) { // 切换页码时
      this.pageSize = val
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        username: this.selectUsers.userName,
        status: this.selectUsers.manageStatus,
        useStatus: this.selectUsers.useStatus,
        startTime: this.startTime,
        endTime: this.endTime,
        online: 'null',
        role: ''
      }
      this.getAllusers(data)
    },
    /**
     * @description: 获取用户列表
     * @description: 一进来就触发
     * @return {*}
     */
    getAllusers(params) {
      getUserList(params).then(res => {
        // const array = []
        if (res.code === 200) {
          // const array = []
          this.verifyData = res.data.data
          this.userCount = res.data.totalCount
          this.verifyData.forEach((item, index) => {
            item.index = (this.pageNum - 1) * this.pageSize + index + 1
            item.userStatus = item.userStatus === '0' ? '启用' : '禁用'
          })
        }
      })
    },
    /**
     * @description: 用户详情
     * @description: 点击详情触发
     * @return {*}
     */
    showVenify(item, i) { // 通过审核按钮
      this.approveForm = {
        userId: item.userId,
        userName: item.username,
        name: item.name,
        email: item.email,
        phone: item.phonenum,
        employer: item.company,
        //useTime: item.duringDay
      }
      for (let i = 0; i < this.roleOptions.length; i++) {
        if (this.roleOptions[i].label === item.role) {
          this.approveForm.role = this.roleOptions[i].value
        }
      }
      this.approveForm.useStatus = item.userStatus === '启用' ? '0' : '1'
      this.approveDialog = true
    },
    /**
     * @description: 提交数据
     * @description: 点击确认触发
     * @return {*}
     */
    approveConfirm(item, i) {
      const data = {
        userId: item.userId,
        username: item.username,
        roleIndex: item.roleIndex,
        role: item.role,
        email: item.email,
        company:item.company,
        //duringDay: this.approveForm.useTime,
        status: 1,
        userStatus: item.userStatus === '启用' ? '0' : '1'
      }
      audit(data).then(res => {
        if (res.code === 200) {
          this.getVerify()
          this.$Message.success('审核成功')
          this.handleReset()
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    /**
     * @description: 拒绝通过审核
     * @description: 填写理由
     * @return {*}
     */
    refuseVenify(item, i) { // 拒绝通过审核
      const data = {
        userId: item.userId,
        username: item.username,
        email: item.email,
        roleIndex: '',
        role: '',
        //duringDay: '',
        status: 0,
        userStatus: '1'
      }
      const that = this
      this.$Modal.confirm({
        title: '提示',
        content: '您确认拒绝该用户吗？',
        okText: '确定',
        cancelText: '取消',
        closable: false,
        onOk() {
          audit(data).then(res => {
            if (res.code === 200) {
              that.getVerify()
              this.$Message.success('审核成功')
            } else {
              this.$Message.error(res.message)
            }
          })
        },
        onCancel() {
          console.log(1)
        }
      })
    },
    /**
     * @description: 删除用户
     * @description: 点击删除触发
     * @return {*}
     */
    deleteDate(item, i) {
      const data = {
        userId: item.userId
      }
      const that = this
      this.$Modal.confirm({
        title: '提示',
        content: '您确认删除该用户吗？',
        okText: '确定',
        cancelText: '取消',
        closable: false,
        onOk() {
          userDelete(data).then(res => {
            if (res.code === 200) {
              debugger
              this.$Message.success('用户删除成功!')
              that.verifyData.splice(i, 1)
              that.getVerify()
              const currentCount = that.userCount - 1
              if (currentCount % 10 === 0) { // 所胜所有数据为10的倍数时
                that.pageNum = that.pageNum - 1
                that.getVerify()
              }
            } else {
              this.$Message.error('用户删除失败!')
            }
          })
        },
        onCancel() {
          console.log(1)
        }
      })
    },
    /**
     * @description: 选择开始时间
     * @return {*}
     */
    startTimeVal(val) { // 起始时间变化时
      this.startTime = val.toString()
      console.log('开始时间', val)
    },
    /**
     * @description: 选择结束时间
     * @return {*}
     */
    endTimeVal(val) { // 结束时间变化
      this.endTime = val.toString()
      console.log('结束时间', val)
    },
    /**
     * @description: 查询用户
     * @description: 点击查询触发
     * @return {*}
     */
    handleSubmit() { // 查询用户
      this.pageNum = 1
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        username: this.selectUsers.userName,
        status: this.selectUsers.manageStatus,
        userStatus: this.selectUsers.useStatus,
        startTime: this.startTime,
        endTime: this.endTime,
        online: 'null',
        role: ''
      }
      this.getAllusers(data)
    },
    /**
     * @description: 查询重置
     * @description: 点击重置触发
     * @return {*}
     */
    resetSearch() {
      this.selectUsers = {
        username: '',
        useStatus: 'null',
        manageStatus: 'null'
      }
      this.startTime = null
      this.endTime = null
    },
    /**
     * @description: 表单重置
     * @description: 新增、修改
     * @return {*}
     */
    handleReset() {
      this.approveDialog = false
      this.approveForm = {
        userId: '',
        userName: '',
        name: '',
        email: '',
        phone: '',
        employer: '',
        role: this.roleOptions[0].value,
        //useTime: '30',
        useStatus: '0'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.permission-verify-container {
  height: auto;
     background: #ffffff;
    padding: 16px;
}
</style>
<style lang="less" >
.permission-verify-container {
 .ivu-table td, .ivu-table th {
     border-bottom: 0px solid #e8eaec !important;
}
    .ivu-table:before{content:'';width:100%;height:0px;position:absolute;left:0;bottom:0;z-index:1}
    .ivu-table:after{content:'';width:0px;height:100%;position:absolute;top:0;right:0;z-index:3}
}
</style>
